<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
    <script src="./vue-resource.min.js"></script>
</head>
<body>
详见官方文档：
<a href="https://github.com/pagekit/vue-resource">
    https://github.com/pagekit/vue-resource
</a>

<div id="app">
    <input type="button" value="get请求" @click="getInfo">
</div>
JSONP原理：
    1.由于浏览器的安全限制，不要允许ajax访问协议不同，域名不同，端口号不同的数据接口，浏览器认为这种访问不安全
    2.可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式称之为JSONP
    （注：根据JSONP的实现原理，JSONP只支持Get请求）
    具体实现过程：
        1.先在客户端定义一个回调方法，预定义对数据的操作
        2.再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口
        3.服务器数据接口组织好要发送客户端的数据，在拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行
        4.客户端拿到服务器返回的字符串之后，当做script脚本去解析执行，这样就可以拿到JSONP的数据了

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            name:"hello，vue"
        },
        methods:{
            /**
             * 发起get请求
             */
            getInfo(){
                this.$http.jsonp("http://www.baidu.com").then( result => {
                    console.log(result)
                })
            }
        }
    })
</script>
</html>